<template>
    <div id="leftNav">
        <ul id="licon">
            <li>
                <p class="icon iconfont icon-qian"></p>
                <p>收银</p>
            </li>
            <li>
                <p class="icon iconfont icon-dianpu-xianxing"></p>
                <p>店铺</p>
            </li>
            <li>
                <p class="icon iconfont icon-canyin"></p>
                <p>产品</p>
            </li>
            <li>
                <p class="icon iconfont icon-yinhangqia-xianxing"></p>
                <p>会员</p>
            </li>
            <li>
                <p class="icon iconfont icon-tiaoxingtu-xianxing"></p>
                <p>统计</p>
            </li>
            <li>
                <p class="icon iconfont icon-shezhi"></p>
                <p>设置</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'leftNav',
        mounted:function(){
            let leftNav = document.getElementById('licon');
            leftNav.style.height = Math.max(
                                            document.documentElement.clientHeight, 
                                            window.innerHeight
                                        ) + 'px';
            console.log(document.documentElement.clientHeight);
            console.log(window.innerHeight);
        }
    }
</script>

<style scoped>
    #licon{
        list-style: none;
        text-align: center;
        width: 5%;
        color: #DCDFE6;
        background-color: #409EFF;
        float: left;
    }
    #licon li{
        border-bottom: 1px solid #C0C4CC;
        padding: 1rem;
    }
    #licon li .icon{
        font-size: 2rem;
        color: #F2F6FC;
        cursor: pointer;
    }
</style>